<template>
	<view class="">

		<view class="por gamelistbox" :class="'gbl_' + gi" v-if="iftit">
			<view class="gamelistbox-listit bj_center">
				<image :src="obj.pic" mode="heightFix"></image>
				<text>{{obj.name}}</text>
			</view>
			<image src="/static/game/0.png" class="gamelistbox-dl"></image>
			<image src="/static/game/0.png" class="gamelistbox-dr"></image>

			<swiper ref="swiper" :current="currentIndex" @change="onSwiperChange" :circular="true"
				style="height: calc(233 * 3rpx);">
				<swiper-item class="clearfloat" style="padding: 0 6rpx;" v-for="item in obj.zlist">

					<gameitemVue v-for="si in item" :obj="si"></gameitemVue>

				</swiper-item>
			</swiper>

			<view class="gamelistbox-btnbox bj_between">
				<image src="/static/game/b1.png" mode="" @click="prev"></image>
				<image src="/static/game/b2.png" mode="" @click="next"></image>
			</view>
		</view>

		<view class="gamelistbox2 mb30" v-if="!iftit && obj.list.length > 0">
			<view class="clearfloat mb30">
				<gameitemVue v-for="si in datalist" :obj="si"></gameitemVue>
			</view>
			<view class="bj_center mb30">
				<progress class="gamelistbox2-progress" :percent="bfb" :activeColor="'#FFBE32'"
					:backgroundColor="'#0D113B'"></progress>
				<text class="f24">{{bfb}}%</text>
			</view>
			<view class="bj_center">
				<view class="gamelistbox2-btn" @click="fy">
					{{$t("morebtn")}}
				</view>
			</view>
		</view>

	</view>

</template>

<script setup>
	import {
		ref,
		watch,
		inject,
		provide,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import gameitemVue from './gameitem.vue';
	import common from '../../js/common';

	const opgc = inject("opgc");
	provide("opgc", opgc);
	provide("getlist", getlist);

	let swiper = ref(null)
	let max = ref(0)
	let currentIndex = ref(0) // 当前页索引

	let nowindex = 0 // 独立查看列表模式中开始的游戏序号数
	let datalist = ref([]) // 独立查看列表模式中展示的游戏集合
	let bfb = ref(0); // 独立查看列表模式中展示的百分比
	let iflogin = ref(false)

	const props = defineProps({
		obj: {
			type: Object,
			default: {}
		},
		// 是否出现标题
		iftit: {
			type: Boolean,
			default: true
		},
		// 每页条数
		pagesize: {
			type: Number,
			default: 12
		},
		// 显示序列
		gi: {
			type: Number,
			default: 0
		}
	});

	watch(() => props.obj, (val) => {
		if (!props.iftit) {
			props.obj.list = [];
			props.obj.zlist = [];
			nowindex = 0;
			datalist.value = []
			getlist();
		}

	})

	onMounted(function() {
		setTimeout(function() {
			ifover()
		}, 1000)
	})

	function ifover() {
		const observer = uni.createIntersectionObserver(this);
		observer.relativeToViewport().observe('.gbl_' + props.gi, (res) => {
			if (res.intersectionRatio > 0) {
				// console.log('元素进入可视区域' + props.gi);
				if (!iflogin.value) {
					iflogin.value = true
					getlist();
				}

			} else {
				// console.log('元素离开可视区域' + props.gi);
			}
		});
	}

	onLoad(function() {
		props.obj.list = [];
		props.obj.zlist = [];
		// setTimeout(function() {
		// 	getlist();
		// }, props.gi * 3000)

	})

	function getlist() {
		common.getGameList({
			pageNumber: 1,
			pageSize: props.iftit ? 12 * 10 : 9999,
			type_id: props.obj.id,
			col_type: "1"
		}).then(res => {
			for (var i = 0; i < res.data.list.length; i++) {
				props.obj.list.push(res.data.list[i])
			}
			// 有标题的情况采用swiper，需要进行分组
			if (props.iftit) {
				let box = [];
				for (var i = 0; i < props.obj.list.length; i++) {
					if (i % props.pagesize == 0) {
						box = [];
					}

					let item = props.obj.list[i]
					item.index = i;
					box.push(item)
					if (i % props.pagesize == 0) {
						props.obj.zlist.push(box)
					}
				}
				max.value = props.obj.zlist.length
				// 先加载第一页图片
				getpic();
			} else {
				fy();
			}
		})
	}

	// swiper 滑动时触发
	const onSwiperChange = (e) => {
		currentIndex.value = e.detail.current // 更新 currentIndex
		getpic();
	}

	// 给swiper里通知加载图片
	const getpic = () => {
		try {
			for (var i = 0; i < props.obj.zlist[currentIndex.value].length; i++) {
				props.obj.zlist[currentIndex.value][i].op = true
			}
		} catch (error) {
			//TODO handle the exception
		}

	}

	function fy() {
		let max = 0;
		if (nowindex + props.pagesize > props.obj.list.length) {
			max = props.obj.list.length
		} else {
			max = nowindex + props.pagesize
		}

		for (let i = nowindex; i < max; i++) {
			let json = props.obj.list[i];
			json.op = true
			datalist.value.push(json);
		}
		nowindex = max

		bfb.value = Number(nowindex / props.obj.list.length * 100).toFixed(0)
		// console.log(datalist.value);
	}

	function prev() {
		if (currentIndex.value == 0) {
			currentIndex.value = max.value - 1
		} else {
			currentIndex.value--
		}
	}

	function next() {
		if (currentIndex.value == max.value - 1) {
			currentIndex.value = 0
		} else {
			currentIndex.value++
		}
	}
</script>

<style scoped lang="scss">
	.gamelistbox {
		background: #00561D;
		border-radius: 30rpx;
		padding: 84rpx 18rpx 44rpx;
		margin-bottom: 40rpx;
		position: relative;
		overflow: hidden;

		&-dl {
			position: absolute;
			width: 48rpx;
			height: 48rpx;
			top: 14rpx;
			left: 24rpx;
		}

		&-dr {
			position: absolute;
			width: 48rpx;
			height: 48rpx;
			top: 14rpx;
			right: 24rpx;
		}

		&-listit {
			position: absolute;
			height: 80rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			left: 0;
			top: -20rpx;
			width: 100%;
			background: url("/static/page1/tb.png") no-repeat center center;
			background-size: auto 100%;

			image {
				height: 48rpx;
				margin-right: 20rpx;
			}
		}

		&-btnbox {
			padding: 0 260rpx;
			margin-top: 30rpx;

			image {
				width: 56rpx;
				height: 56rpx;
			}
		}
	}

	.gamelistbox2 {
		padding: 0 18rpx;
		overflow: hidden;

		&-progress {
			width: 160rpx;
			height: 16rpx;
			border-radius: 100rpx;
			margin-right: 20rpx;
		}

		&-btn {
			width: 256rpx;
			height: 76rpx;
			line-height: 76rpx;
			background: #247BFF;
			border-radius: 12rpx;
			text-align: center;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>